import React,{Component} from 'react';
import {View,Text,TouchableOpacity,Image} from 'react-native';
import { pxToDp} from '../../../utils/stylesKits'
import SvgUri from 'react-native-svg-uri'
import {man,woman} from '../../../res/fonts/svg'
import { Input } from 'react-native-elements';
import DatePicker from "react-native-datepicker"
import { color } from 'react-native-reanimated';
import Geo from '../../../utils/Geo';
import Picker from 'react-native-picker';
import THButton from '../../../components/THButton';
import ImagePicker from 'react-native-image-crop-picker';
import {Overlay} from 'teaset'
import {inject,observer} from 'mobx-react'
import request from '../../../utils/request';
import {ACCOUNT_LOGINREGINFO} from '../../../utils/pathMap'
import Toast from '../../../utils/toast'
import JMessage from '../../../utils/JMessage'
@inject("RootStore")
@observer

    class Index extends Component{
        state = {
            nickname:"张三",
            gender:'男',
            birthday:"2020-02-22",
            city:"广州市",
            header:"/src/res/OIP.jpg",
            lng:116.397128,
            lat:39.916527,
            address:"中州中路王府井"
        }
        // 初始化立即执行方法 
        async componentDidMount(){
            console.log(this.props);
            // 获取定位
            const res = await Geo.getCityByLocation();
            // 模拟器目前先写死
            const city = '洛阳'
            const lng = 116.397128
            const lat = 39.916527
            const address = '中州中路王府井'
            this.setState({address,city,lng,lat})

            console.log(res)
        }
        // 选中性别
        chooseGender =(gender) =>{
            this.setState({gender})
        }
        // 选择城市
        showCityPicker=()=>{ 
            Picker.init({
                pickerData:[{"北京":[{"北京":["东城区","西城区"]}]},{"河南":[{"洛阳":["西工区","涧西区"]}]}],
                selectedValue:["北京","北京"],
                wheelFlex:[1,1,0], // 显示省市
                pickerConfirmBtnText:"确定",
                pickerCancelBtnText:"取消",
                pickerTitleText:"选择城市",
                onPickerConfirm:data => {
                    console.log(data[1])
                    this.setState({city:data[1]});
                }
            });
            Picker.show();
        }
        // 点击设置头像按钮
        chooseHeadImage = async () =>{
            /**
             * 校验表单
             */
            const image = ImagePicker.openPicker({
                width: 300, 
                height: 400, 
                cropping: true
             })

             let overlayViewRef = null

            //  显示审核中的效果
             let overlayView = (
                <Overlay.View
                  style={{flex:1,backgroundColor:"#000"}}
                  modal={true}
                  overlayOpacity={0}
                  ref={v => overlayViewRef = v}
                  >
                <View style={{marginTop:pxToDp(30),alignSelf:'center',width:pxToDp(334),height:pxToDp(334),position:"relative",justifyContent:"center",alignItems:"center"}}>
                <Image style={{width:"100%",height:"100%",position:"absolute",left:0,top:0,zIndex:100}} source={require("../../../res/scan.gif")} />
                {/* <Image style={{width:"60%",height:"60%"}} source={{uri:image.path}} /> */}
                    <Text>浮层</Text>
                  </View>
                </Overlay.View>
              );
              Overlay.show(overlayView);

            // 完善个人信息
            let params = this.state;
            // console.log(params)
            const res1 = await request.privatePost(ACCOUNT_LOGINREGINFO,params);
            // console.log(res1)
            if(res1.code != 10000){
                return;
            }
            overlayViewRef.close();
            // console.log('账号密码',)
            // 注册极光IM
            const res2 = await this.jgBussiness(this.props.RootStore.userId,this.props.RootStore.mobile);
            // console.log('注册成功'+res2)
            
            // 关闭浮层
            // overlayViewRef.close();

            Toast.message('操作成功',2000,"center");
            
            // 跳转主页面
            setTimeout(() => {
                this.props.navigation.navigate("Tabbar")
            }, 1000);

            //   暂时先不往下执行
              return
              Overlay.hide();
            const res0 = await this.uploadHeadImg(image)
              
            console.log(res0)
            
              
        }
        // 注册极光
        jgBussiness = async (username,password) =>{
            return await JMessage.register(username,password);
        }
        // 上传文件处理
        uploadHeadImg = ()=>{
            let formData = new formData
            formData.append("headPhoto",{
                uri:image.path,
                type:image.mime,
                name:image.path.split('/').pop()
            })

          //   执行post请求
         return request.privatePost(ACCOUNT_CHECKHEADIMAGE,formData,{
              headers:{
                  'content-Type':'multipart/form-data'
              }
          })
        }
        render(){
            const {gender,nickname,birthday,city} = this.state
            const dateNow = new Date();
            const currentDate = `${dateNow.getFullYear()}-${dateNow.getMonth()+1}-${dateNow.getDate()}`;
            return(
                <View style={{backgroundColor:"#fff",padding:pxToDp(20)}}>
                    {/* 标题 */}
                    <View><Text style={{fontSize:pxToDp(20),fontWeight:"bold",color:"#666"}}>填写资料</Text></View>
                    <View><Text style={{fontSize:pxToDp(20),fontWeight:"bold",color:"#666"}}>提升我的魅力</Text></View>
                    {/* 性別 */}
                    <View style={{marginTop:pxToDp(40)}}>
                        <View style={{width:"80%",flexDirection:'row',alignSelf:"center",justifyContent:"space-around"}}>
                            <TouchableOpacity onPress={this.chooseGender.bind(this,'男')} style={{width:pxToDp(70),height:pxToDp(70),borderRadius:pxToDp(70),backgroundColor:gender === "男"?"#d81e06":"#eee",justifyContent:"center",alignItems:"center"}}>
                              <SvgUri svgXmlData={man} width="60" height="60" />
                            </TouchableOpacity>
                            <TouchableOpacity onPress={this.chooseGender.bind(this,'女')} style={{width:pxToDp(70),height:pxToDp(70),borderRadius:pxToDp(70),backgroundColor:gender === "女"?"#d81e06":"#eee",justifyContent:"center",alignItems:"center"}}>
                              <SvgUri svgXmlData={woman} width="60" height="60" />
                            </TouchableOpacity>
                        </View>
                    </View>
                    {/* 昵称输入 */}
                    <View style={{marginTop:pxToDp(20)}}>
                        <Input value={nickname} placeholder="设置昵称" onChangeText={(nickname)=>this.state({nickname})}></Input>
                    </View>
                    {/* 日期选择 */}
                    <View>
                    <DatePicker
                        androidMode="spinner"
                        style={{width: "100%"}}
                        date={birthday}
                        mode="date"
                        placeholder="设置生日"
                        format="YYYY-MM-DD"
                        minDate="1900-01-01"
                        maxDate={currentDate}
                        confirmBtnText="确定"
                        cancelBtnText="取消"
                        customStyles={{
                        dateIcon: {
                            display:"none"
                        },
                        dateInput: {
                            marginLeft: pxToDp(10),
                            borderWidth:0,
                            borderBottomWidth:pxToDp(1.1),
                            alignItems:"flex-start",
                            paddingLeft:pxToDp(3)
                        },
                        placeholderText:{
                            fontSize: pxToDp(18),
                            color:"#afafaf"
                        }
                        // ... You can check the source to find the other keys.
                        }}
                        onDateChange={(birthday) => {this.setState({birthday})}}
                    />
                    </View>
                    {/* 地址选择 */}
                    <View style={{paddingTop:pxToDp(20)}}>
                        <TouchableOpacity onPress={this.showCityPicker}>
                            <Input disabled={true} inputStyle={{color:"#666"}} value={"当前定位:"+city} />
                        </TouchableOpacity>
                    </View>
                    {/* 设置头像 */}
                    <View>
                        <THButton onPress={this.chooseHeadImage} style={{borderRadius:pxToDp(20),alignSelf:"center",height:pxToDp(40)}}>设置头像</THButton>
                    </View>
                </View>
            );
        }
    }
export default Index;